<template>
	<el-dialog title="地址选择" v-model="data.open" width="900px" append-to-body>
		<el-form>
			<el-row>
				<el-col :span="10">
					<el-form-item label="搜索地址">
						<el-input type="text" id="suggestId" v-model="data.searchAddress" placeholder="请输入地址" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div id="map-container" style="width: 100%; height: 400px"></div>
		<template #footer>
			<el-form label-width="80px">
				<el-row>
					<!-- <el-col :span="10">
						<el-form-item label="搜索地址">
							<el-input type="text" id="suggestId" v-model="data.searchAddress" placeholder="请输入地址" />
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item label="当前地址">
							<el-input v-model="data.addressInfo.address" disabled placeholder="地址信息">
								<!-- <template #prepend>
								{{ data.addressInfo.province }}{{ data.addressInfo.city }}{{ data.addressInfo.district }}
							</template> -->
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="当前坐标">
							<el-input :value="latOrLang" disabled placeholder="">
								<!-- <template #prepend>
								{{ data.addressInfo.province }}{{ data.addressInfo.city }}{{ data.addressInfo.district }}
							</template> -->
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-button type="primary" @click="confirm">确定</el-button>
			<el-button @click="cancel">取消</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, reactive, computed } from "vue";
const BMap = (window as any).BMap;
const emit = defineEmits(["confirmMapAddress"]);
const props = defineProps({
	longitude: Number,
	latitude: Number
});
const data = reactive({
	searchAddress: "",
	// 地址信息
	addressInfo: {
		// 经度
		longitude: 0,
		// 纬度
		latitude: 0,
		// 省
		province: "",
		// 市
		city: "",
		// 区
		district: "",
		// 详细地址
		address: ""
	},
	open: false
});

const latOrLang = computed(() => {
	return `${data.addressInfo.longitude},${data.addressInfo.latitude}`;
});
const initlp = () => {
	if (props.latitude != -1) {
		data.addressInfo.longitude = props.longitude!;
		data.addressInfo.latitude = props.latitude!;
		initBaiduMap();
		return false;
	}
	let geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition((r: any) => {
		if (r.point) {
			data.addressInfo.longitude = r.longitude;
			data.addressInfo.latitude = r.latitude;
			initBaiduMap();
		}
	});
};
const initBaiduMap = () => {
	nextTick(() => {
		let map = new BMap.Map("map-container"); // 创建地图实例
		let point = new BMap.Point(data.addressInfo.longitude, data.addressInfo.latitude); // 设置中心点坐标
		map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		let marker = new BMap.Marker(point); // 创建标注
		map.addOverlay(marker); // 将标注添加到地图中
		geocAddress(point);
		/* 初始化地图 end */
		/** 点击地图创建坐标事件Start */
		// 添加地图点击事件
		map.addEventListener("click", function (e: any) {
			let click = e.point; // 点击的坐标
			map.clearOverlays(); // 移除地图上的标注
			let marker = new BMap.Marker(click); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			geocAddress(e.point);
		});
		/** 点击地图创建坐标事件End */
		/** 搜索地址Start */
		const ac = new BMap.Autocomplete({
			//建立一个自动完成的对象
			input: "suggestId",
			location: map
		});
		let myValue: any;
		ac.addEventListener("onconfirm", (e: any) => {
			//鼠标点击下拉列表后的事件
			const _value = e.item.value;
			myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
			map.clearOverlays(); //清除地图上所有覆盖物
			function myFun() {
				const pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp)); //添加标注
				geocAddress(pp);
			}
			const local = new BMap.LocalSearch(map, {
				//智能搜索
				onSearchComplete: myFun
			});
			local.search(myValue);
		});
	});
};
// // 逆向解析地址
const geocAddress = (point: any) => {
	let geoc = new BMap.Geocoder();
	geoc.getLocation(point, function (geocInfo: any) {
		// 设置基本信息
		let addressInfo = geocInfo.addressComponents;
		data.addressInfo.longitude = point.lng;
		data.addressInfo.latitude = point.lat;
		data.addressInfo.province = addressInfo.province;
		data.addressInfo.city = addressInfo.city;
		data.addressInfo.district = addressInfo.district;
		let address = addressInfo.street + addressInfo.streetNumber;
		if (geocInfo.surroundingPois.length > 0) {
			address = address + geocInfo.surroundingPois[0].title;
		}
		data.addressInfo.address = address;
	});
};
/** 打开地图选择 */
const show = () => {
	data.open = true;
	initlp();
};
/** 确认选择 */
const confirm = () => {
	emit("confirmMapAddress", [data.addressInfo, data.addressInfo.address]);
	data.open = false;
};
const cancel = () => {
	data.open = false;
};
defineExpose({
	data,
	show,
	confirm,
	cancel
});
</script>

<style lang="scss">
.tangram-suggestion-main {
	z-index: 9999;
}
</style>
